<template>
  <div class="home">
    <div class="header">
      <div class="header-cont">
        <div class="title">AI赋能工具，让创新更简单</div>
        <div class="tips">1.3亿全球商标精准查询，避免商标侵权，助力品牌保护</div>
        <div class="tag">
          <span
            class="z_flex"
            :class="tagIndex === index ? 'select':''"
            v-for="(item,index) in tag"
            :key="index"
            @click="changeTag(index)"
          >{{ item.title}}</span>
        </div>
        <div class="saerch">
          <span
            :class="searchIndex === index ? 'select-span':''"
            v-for="(item,index) in search"
            :key="index"
            @click="searchIndex = index"
          >{{ item.title }}</span>
        </div>
        <div class="ipt">
          <span class="h11">中国</span>
          <img src="@/assets/zy/three.png" alt srcset />
          <el-input style="flex: 1" v-model="input" placeholder="请输入商标名称、申请号或申请人名称" />
          <div class="btn">立即搜索</div>
        </div>
        <div class="crad">
          <div
            class="crad-view"
            :class="cradIndex === index ? 'select' : ''"
            v-for="(item,index) in crad"
            :key="index"
            @click="cradIndex = index"
          >
            <div class="pos">立即体验</div>
            <div class="left">
              <img v-if="index===0" src="@/assets/zhome/0.png" alt />
              <img v-else src="@/assets/zhome/1.png" alt />
              <div class="name">
                <div>{{ item.title }}</div>
                <div>{{ item.tips }}</div>
              </div>
            </div>
            <div class="right z_flex">
              <img v-if="cradIndex !== index" src="@/assets/zhome/right.png" alt />
              <img v-else src="@/assets/zhome/wright.png" alt />
            </div>
          </div>
        </div>
        <div class="num">
          <div class="num-view" v-for="(item,index) in numList" :key="index">
            <div>
              {{ item.num }}
              <span>{{ item.unit }}</span>
            </div>
            <div>{{ item.tips }}</div>
          </div>
        </div>
        <div class="card">
          <div class="card-view" v-for="(item,index) in cardList" :key="index">
            <img v-if="!index" src="@/assets/zhome/a0.png" alt />
            <img v-else src="@/assets/zhome/a1.png" alt />
            <div class="card-view-right">
              <div class="tips0">{{ item.title }}</div>
              <div class="tips1">{{ item.tips }}</div>
              <div class="btn z_flex">立即体验</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title">智能解析1.78亿全球专利，一键生成技术情报</div>
      <div class="tips">
        覆盖全球108个国家/组织/地区，1.75亿+条专利数据，提供了六大多元检索入口，全口径指标的快速筛选统计分
        <br />析功能，多维度详尽专利文献信息呈现，及时发现风险与机会
      </div>
      <div class="cont">121</div>
    </div>
    <div class="content1">
      <div class="title">多种检索方式，让检索更高效</div>
      <div class="content1-cont">
        <div class="left">
          <div
            :class="leftIndex === index ? 'select' :''"
            v-for="(item,index) in leftList"
            :key="index"
            @click="leftIndex = index"
          >
            <span>{{ item.title }}</span>
            <span v-if="leftIndex === index" class="z_flex">立即体验</span>
          </div>
        </div>
        <div class="right"></div>
      </div>
    </div>
    <div class="content2">
      <div class="view" style="margin-bottom: 85px">
        <div class="img"></div>
        <div class="text">
          <div>数据权威更新及时，特色标签深度加工</div>
          <div>收录了全球五个国家/组织/地区1.7亿余件专利信息，数据采购自各国知识产权官方和商业机构，全球专利信息每周更新，助力用户实时掌握最新技术。加工特色数据标签高达400多个，融合了专利诉讼、转让、许可、复审无效、专利同族引证信息，高效定位目标专利数据。</div>
        </div>
      </div>
      <div class="view">
        <div class="text">
          <div>数据权威更新及时，特色标签深度加工</div>
          <div>收录了全球五个国家/组织/地区1.7亿余件专利信息，数据采购自各国知识产权官方和商业机构，全球专利信息每周更新，助力用户实时掌握最新技术。加工特色数据标签高达400多个，融合了专利诉讼、转让、许可、复审无效、专利同族引证信息，高效定位目标专利数据。</div>
        </div>
        <div class="img"></div>
      </div>
      <div class="t1">1.3亿全球商标精准查询，避免商标侵权，助力品牌保护</div>
      <div class="y2">
        覆盖全球108个国家/组织/地区，1.3亿+全球商标数据，提供了六大多元检索入口，全口径指标的快速筛选统计分析功能，多维度详尽商标信息呈现，支持商标分类检索、
        <br />商标筛选等多种形式，为商标工作带来更便利的辅助方案
      </div>
      <div class="image"></div>
    </div>
  </div>
</template>
<script setup>
let leftList = ref([
  { title: "简单检索" },
  { title: "高级检索" },
  { title: "批量检索" },
  { title: "语义检索" },
  { title: "法律检索" },
  { title: "图像检索" }
]);
let leftIndex = ref(0);

let cardList = ref([
  {
    title: "专利监控",
    tips: "知产宝专利智能监控"
  },
  { title: "商标监控", tips: "知产宝商标智能监控" }
]);

let crad = ref([
  {
    title: "高级检索",
    tips: "智能在线高级检索"
  },
  {
    title: "图像检索",
    tips: "智能图像检索"
  }
]);
let cradIndex = ref(0);

let numList = ref([
  { num: 1.3, unit: "亿+", tips: "全球商标数据" },
  { num: 2000, unit: "个", tips: "国家/地区/组织" },
  { num: 2000, unit: "万+", tips: "商标申请人" },
  { num: 2000, unit: "万+", tips: "代理机构" },
  { num: 2000, unit: "+", tips: "服务机构" }
]);

let tag = ref([
  {
    title: "商标"
  },
  { title: "专利" }
]);
let tagIndex = ref(0);

const changeTag = index => {
  tagIndex.value = index;
};

let search = ref([
  { title: "综合搜索" },
  { title: "商标名称" },
  { title: "申请号" },
  { title: "申请人" }
]);
let searchIndex = ref(0);
</script>
<style lang="scss" scoped>
::v-deep .el-input__wrapper {
  box-shadow: 0 0 0 1px transparent inset;
}
.home {
  .content2 {
    padding: 133px 240px 100px;
    background: white;
    .image {
      height: 720px;
      background: #f5f9fd;
      border: 2px solid #ffffff;
      border-radius: 4px;
      box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08);
    }
    .t1 {
      font-size: 28px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: center;
      color: #202020;
      line-height: 50px;
      padding-top: 150px;
    }
    .y2 {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #575966;
      line-height: 28px;
      padding: 16px 0 32px;
    }
    .view {
      display: flex;
      div:first-of-type {
        margin-right: 70px;
      }
      .img {
        width: 700px;
        height: 488px;
        flex-shrink: 0;
        background-color: red;
      }
      .text {
        flex: 1;
        div:first-of-type {
          font-size: 28px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          text-align: left;
          color: #202020;
          line-height: 50px;
          padding-top: 100px;
        }
        div:last-of-type {
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: justify;
          color: #575966;
          line-height: 28px;
          letter-spacing: -0.2px;
          margin-top: 10px;
        }
      }
    }
  }
  .content1 {
    padding: 80px 240px 66px;
    background-color: #f4f6fa;
    .title {
      padding-bottom: 30px;
      font-size: 28px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #202020;
      line-height: 50px;
    }
    &-cont {
      display: flex;
      .left {
        width: 300px;
        flex-shrink: 0;
        background-color: #ffffff;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        div {
          flex-shrink: 0;
          flex: 1;
          padding-left: 42px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          cursor: pointer;
          .z_flex {
            width: 80px;
            height: 28px;
            background: #0052d9;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            color: #ffffff;
            line-height: 28px;
            margin-top: 10px;
          }
        }
        .select {
          background: url("@/assets/zhome/bg0.png") no-repeat;
          background-size: 100% 100%;
          height: 120px;
        }
      }
      .right {
        flex: 1;
        height: 620px;
        background: #ffffff;
        border-radius: 4px;
      }
    }
    .title {
      font-size: 28px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      text-align: center;
      color: #202020;
      line-height: 50px;
    }
  }
  .content {
    padding: 150px 240px 120px;
    background: white;
    .cont {
      height: 720px;
      background: linear-gradient(180deg, #fafbfc, #ffffff);
      border: 2px solid #ffffff;
      border-radius: 4px;
      box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08);
    }
    .title {
      text-align: center;
      font-size: 28px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #202020;
      line-height: 50px;
    }
    .tips {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: center;
      color: #575966;
      line-height: 28px;
      text-align: center;
      padding: 16px 0 40px;
    }
  }
  .card {
    display: flex;
    &-view {
      flex: 1;
      height: 180px;
      background: linear-gradient(180deg, #fafbfc, #ffffff);
      border: 2px solid #ffffff;
      box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08);
      display: flex;
      img {
        width: 180px;
        height: 180px;
      }
      &-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 30px;
        .tips0 {
          font-size: 24px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #202020;
          line-height: 36px;
        }
        .tips1 {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #222426;
          line-height: 20px;
          margin: 11px 0 15px;
        }
        .btn {
          width: 100px;
          height: 30px;
          background: #0052d9;
          border-radius: 2px;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          text-align: left;
          color: #ffffff;
          line-height: 30px;
          cursor: pointer;
        }
      }
    }
    &-view:first-of-type {
      margin-right: 20px;
    }
  }
  .num {
    display: flex;
    margin: 30px 0;
    &-view {
      margin-right: 80px;
      div:first-of-type {
        font-size: 28px;
        font-family: San Francisco Display, San Francisco Display-Bold;
        font-weight: 600;
        text-align: center;
        color: #202020;
        line-height: 36px;
        span {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #222426;
          line-height: 20px;
          margin-left: -5px;
        }
      }
      div:last-of-type {
        padding-top: 10px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        color: #222426;
        line-height: 20px;
      }
    }
  }
  .crad {
    display: flex;
    padding-top: 16px;
    &-view {
      width: 220px;
      height: 72px;
      background: #ffffff;
      border-radius: 4px;
      display: flex;
      align-items: center;
      margin-right: 20px;
      cursor: pointer;
      position: relative;
      .pos {
        width: 56px;
        height: 20px;
        line-height: 20px;
        background: #ff4d00;
        border-radius: 8px 8px 8px 0px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: center;
        color: #ffffff;
        position: absolute;
        top: -10px;
        right: -10px;
      }
      .left {
        width: 186px;
        height: 72px;
        background: #ffffff;
        border-radius: 4px;
        display: flex;
        align-items: center;
        img {
          width: 68px;
          height: 68px;
        }
      }
      .right {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        img {
          width: 14px;
          height: 14px;
        }
      }

      .name {
        div {
          font-size: 12px;
          font-family: PingFang SC, PingFang SC-Regular;
          text-align: left;
          color: #646770;
          line-height: 17px;
        }
        div:first-of-type {
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #202020;
          line-height: 22px;
          padding-bottom: 7px;
        }
      }
    }
    .select {
      background: #0052d9;
      .name {
        div {
          color: #0052d9;
        }
      }
    }
  }
  .header {
    height: 640px;
    background: url("../../assets/zhome/bg.png") no-repeat;
    background-size: 100% 100%;
    padding: 0 240px;
    &-cont {
      padding-top: 65px;
      .ipt {
        width: 580px;
        height: 48px;
        background: #ffffff;
        border: 1px solid #1752d9;
        border-radius: 4px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .h11 {
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          color: #222426;
          padding-left: 18px;
          display: flex;
          align-items: center;
        }
        img {
          width: 12px;
          height: 12px;
          margin: 0 0 0 5px;
        }

        .btn {
          width: 120px;
          line-height: 48px;
          height: 100%;
          background: #0052d9;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          cursor: pointer;
          color: #ffffff;
        }
      }
      .saerch {
        display: flex;
        position: relative;
        padding: 30px 0 16px;
        span {
          padding: 0 12px;
          cursor: pointer;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          text-align: left;
          color: #202020;
          line-height: 20px;
          position: relative;
        }
        span::before {
          content: "";
          width: 1px;
          height: 14px;
          background: #202020;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
        }
        span:first-of-type {
          padding-left: 0;
        }
        span:last-of-type::before {
          content: "";
          height: 14px;
          background: transparent;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
        }
        .select-span {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: 600;
          color: #0052d9;
        }
      }
      .title {
        font-size: 40px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
        color: #202020;
        line-height: 56px;
      }
      .tips {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #575966;
        line-height: 22px;
        padding: 17px 0 27px;
      }
      .tag {
        display: flex;
        span {
          width: 100px;
          height: 36px;
          line-height: 36px;
          background: #fff;
          margin-right: 20px;
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          text-align: left;
          color: #202020;
          cursor: pointer;
        }
        .select {
          background: #0052d9;
          color: white;
        }
      }
    }
  }
}
</style>